<template>
    <div class="dormitory-cms" ref="cms">
        <el-form :inline="true" size="mini" :model="searchForm">
            <el-form-item label="标题">
                <el-input placeholder="请输入标题" v-model="searchForm.title"></el-input>
            </el-form-item>
            <el-form-item label="编码" v-model="searchForm.code">
                <el-input placeholder="编码"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="searchForm.status" placeholder="请选择状态">
                    <el-option label="待发布" value="0"></el-option>
                    <el-option label="已发布" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button type="primary" @click="handleReset">重置</el-button>
                <el-button type="primary" @click="handleRefresh">刷新</el-button>
                <el-button type="primary" @click="handleCreate">新建</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="tableData"
                style="width: 100%; margin-bottom: 20px;"
                row-key="ukId"
                border
                stripe
                default-expand-all
                size="mini"
                @current-change="addTab">
            <el-table-column
                    prop="username"
                    label="发布人"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="category.name"
                    label="类型"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="标题"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="browserCount"
                    label="已读人数"
                    width="100">
                <template slot-scope="scope">
                    <div v-if="scope.row.browserCount == null">
                        <span>0</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    width="60">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status == '1'" type="success" size="mini">发布</el-tag>
                    <el-tag v-if="scope.row.status == '0'" type="danger" size="mini">草稿</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    :formatter="dateFormatter"
                    prop="gmtCreate"
                    label="创建时间"
                    width="150">
            </el-table-column>
            <el-table-column
                    :formatter="dateFormatter"
                    prop="gmtModified"
                    label="修改时间"
                    width="150">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="290">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            @click="handleEdit(scope.$index,scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                    <el-button
                            size="mini"
                            type="success"
                            @click="handleBrower(scope.$index, scope.row)">查看
                    </el-button>
                    <el-button
                            size="mini"
                            type="primary"
                            @click="handlePublic(scope.$index, scope.row)">发布
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <dormitory-pagination
                :parent-method="listArticle"
                :pagination="this.$store.state.Navigation.pagination">
        </dormitory-pagination>
        <el-dialog title="活动通知" :visible.sync="dialogFormVisible" :close-on-click-modal="false" label-width="80px">
            <el-form ref="form" :model="articleForm" label-width="80px" :disabled="articleShow">
                <el-form-item label="消息分类">
                    <el-select v-model="articleForm.categoryId" placeholder="请选择通知分类">
                        <el-option
                                v-for="item in category"
                                :key="item.ukId"
                                :label="item.name"
                                :value="item.ukId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="标题">
                    <el-input v-model="articleForm.title" placeholder="请输入标题"></el-input>
                </el-form-item>
                <el-form-item label="内容">
                    <quill-editor ref="text"
                                  v-model="articleForm.content"
                                  class="myQuillEditor"
                                  :options="editorOption"/>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="articleForm.status" placeholder="是否发布">
                        <el-option label="发布" value="1"></el-option>
                        <el-option label="保存为草稿" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSave">保存</el-button>
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import {VueQuillEditor} from "vue-quill-editor";
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';

    import PageSizeUtils from "../../../utils/PageSizeUtils";
    import DormitoryPagination from "../components/DormitoryPagination";
    import {listArticle, updateArticleStatus, deleteArticle, saveArticle,} from "../../../api/cms/article";

    import {selectContent,} from "../../../api/cms/content";
    import {listDictItemByDictCode} from "../../../api/platform/dictItem";

    export default {
        name: "Cms",
        components: {DormitoryPagination, VueQuillEditor,},
        data() {
            return {
                tableData: [],
                searchForm: {
                    title: "",
                    code: "",
                    status: ""
                },
                dialogFormVisible: false,
                articleForm: {
                    title: "",
                    categoryId: "",
                    content: "",
                    status: 0,
                },
                editableTabsValue: '-1',
                editableTabs: [],
                tabIndex: -1,
                articleShow: false,
                editorOption: {
                    theme: 'snow',
                    placeholder: "请在这里输入",
                    readOnly: true
                },
                category: []

            }
        },
        methods: {
            listArticle(current, size) {
                listArticle(this.searchForm, current, size).then(response => {
                    this.tableData = response.data.articles.records
                    PageSizeUtils.setPagination(response.data.articles)
                }).catch(error => {
                    console.log(error)
                })
            },
            handleCreate(index, row) {
                this.category = [];
                this.articleShow = false;
                listDictItemByDictCode("SAIS_CMS").then(response => {
                    this.category = response.data.dictItems
                    this.articleForm = {}
                    this.dialogFormVisible = true;
                }).catch(error => {
                    console.log(error)
                })
            },
            handleEdit(index, row) {
                if (row.status == 1){
                    this.$message.error('该条通知已经发布不可以在修改！')
                    return;
                }
                this.articleShow = false;
                this.articleForm = row;
                selectContent(row.ukId).then(response => {
                    this.articleForm.content = response.data.content.content
                    this.dialogFormVisible = true;
                }).catch(error => {
                    console.log(error)
                })
            },
            handleDelete(index, row) {
                deleteArticle(row.ukId).then(response => {
                    this.listArticle(this.$store.state.Navigation.pagination.current,
                        this.$store.state.Navigation.pagination.size);
                }).catch(error => {
                    console.log(error)
                })
            },
            handleSearch() {
                this.listArticle(this.$store.state.Navigation.pagination.current,
                    this.$store.state.Navigation.pagination.size);
            },
            handleRefresh() {
                this.listArticle(this.$store.state.Navigation.pagination.current,
                    this.$store.state.Navigation.pagination.size);
            },
            handleReset() {
                this.searchForm = {}
            },
            handleSave() {
                saveArticle(this.articleForm).then(response => {
                    this.listArticle(this.$store.state.Navigation.pagination.current,
                        this.$store.state.Navigation.pagination.size);
                    this.dialogFormVisible = false;
                }).catch(error => {
                    console.log(error)
                })
            },
            handleClick(tab, event) {
            },
            addTab(row) {
                if (this.editableTabs.length != 0) {
                    for (let index in this.editableTabs) {
                        if (this.editableTabs[index].title == row.title) {
                            this.editableTabsValue = this.editableTabs[index].name;
                            return;
                        }
                    }
                }

                selectContent(row.ukId).then(response => {
                    let cont = response.data.content;

                    let newTabName = ++this.tabIndex + '';
                    this.editableTabs.push({
                        title: row.title,
                        name: newTabName,
                        content: cont.content,
                    });
                    this.editableTabsValue = newTabName;

                }).catch(error => {
                    console.log(error)
                })
            },
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }

                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            },
            dateFormatter(row, column, cellValue, index, type) {
                let replace = cellValue.replace("T", " ");
                return replace.substring(0, 19);
            },
            handleBrower(index, row) {
                selectContent(row.ukId).then(response => {
                    this.articleForm = row
                    this.articleForm.content = response.data.content.content
                    this.articleShow = true;
                    this.dialogFormVisible = true
                }).catch(error => {
                    console.log(error)
                })
            },
            handlePublic(index, row) {
                if (row.status == 1) {
                    alert("该条消息已经发布过！")
                } else {
                    updateArticleStatus(row.ukId).then(response => {
                        this.listArticle(this.$store.state.Navigation.pagination.current,
                            this.$store.state.Navigation.pagination.size)
                    }).catch(error => {
                        console.log(error)
                    })
                }
            }
        },
        created() {
            PageSizeUtils.setPagination({})
            this.listArticle(this.$store.state.Navigation.pagination.current,
                this.$store.state.Navigation.pagination.size)
        },
        computed: {
            editor() {
                return this.$refs.myQuillEditor.quill;
            },
        }
    }
</script>

<style scoped>
    .dormitory-cms {
        background-color: #ffffff;
        border: #ffffff 3px solid;
    }

</style>
